<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{user/layout}">

<head>
	<title>Detail - sport activity </title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<section class="pt-5  pb-2">
			<div class="container">
				<!-- Content START -->
				<div class="row mt-7">
					<!-- Images -->
					<div class="col-md-5 mb-5 mb-md-0">
						<img th:src="${sport.sportImg}" class="card-img" th:alt="${sport.sportTitle}">
					</div>
		
					<!-- Product detail -->
					<div class="col-md-7 ps-md-6">
						<!-- Badge -->
						<div class="badge text-bg-dark mb-3" th:text="${sport.typeString}"></div>
		
						<!-- Title -->
						<h1 class="h2 mb-4" th:text="${sport.sportTitle}"></h1>
		
						<!-- Rating list -->
						<div class="d-flex align-items-center flex-wrap mb-4">
							Publish Time: <a class="heading-color text-primary-hover mb-0" th:text="${#dates.format(sport.sportPublishTime, 'dd/MM/yyyy HH:mm')}"></a>
						</div>
						<div class="d-flex align-items-center flex-wrap mb-4">
							<a class="heading-color text-primary-hover mb-0" th:if="${sport.sportType == 0}" th:text="${'Address : ' + sport.room.roomAddress}"></a>
							<a class="heading-color text-primary-hover mb-0" th:if="${sport.sportType == 1}" th:text="${'Address : ' + sport.site.siteAddress}"></a>
						</div>
						<div class="d-flex align-items-center flex-wrap mb-4" th:if="${sport.sportType == 0}">
							<a class="heading-color text-primary-hover mb-0" th:text="${'Course : ' + sport.course.courseTitle}"></a>
						</div>
						<div class="d-flex align-items-center flex-wrap mb-4" th:if="${sport.sportType == 0}">
							<div class="d-flex align-items-center">
								<label class="position-relative me-2">
									<a class="heading-color text-primary-hover mb-0">Course</a>
									<span class="avatar avatar-sm">
										<img class="avatar-img rounded-circle border border-white border-3 shadow" th:src="${sport.course.coach.coachAvatar}" alt="">
									</span>
								</label>
								<a class="heading-color text-primary-hover mb-0" th:text="${sport.course.coach.coachName}"></a>
							</div>
						</div>
		
						<!-- Price -->
						<!--<h4 class="text-success mb-4">Capacity：2/10</h4>-->
		
						<!-- Storage choice -->
						
						<div class="d-flex align-items-center gap-1 gap-sm-3 flex-wrap mt-2">
							<h4 class="text-success mb-4 slot-text">Free slot:</h4>
						</div>
						
						<div class="d-flex align-items-center gap-1 gap-sm-3 flex-wrap mb-4">
							<input type="text" class="form-control" id="datepicker" th:value="${nowDateStr}" readonly style="width: 176px;" />
							<th:bolck th:each="slot,slotStat:${slots}">
							<input type="radio" class="btn-check" name="slotRadio" th:id="${slot.slotId}">
							<label class="btn btn-sm btn-light border btn-primary-soft-check mb-0 slot-item" th:value="${slot.slotId}" th:for="${slot.slotId}" th:text="${slot.slotTime}"></label>
							</th:bolck>
						</div>
		
						<!--<p class="mb-4">Remark</p>-->
		
						<!-- Button -->
						<div class="d-grid">
							<button class="btn btn-default mb-0 w-50 create-btn disabled" onclick="createOrder()"><i class="bi bi-cart2 me-2"></i>Create Order</button>
							<p class="mb-0 mt-2 text-end small"><i class="bi bi-question-circle-fill text-danger me-2"></i>Service protection? <a th:href="@{/serviceLaw}" class="mb-0">Look At</a></p>
						</div>
		
					</div>
				</div>
				<!-- Content END -->
		
			</div>
		</section>
		<section class="pt-0  pb-2">
			<div class="container">
				<h2 class="h4 mb-3">Desc</h2>
				<div class="mb-5" th:utext="${sport.sportDesc}"></div>
			</div>
		</section>
		<section class="pt-0  pb-2">
			<div class="container">
				<!-- Title -->
				<h2 class="h4 mb-5">review</h2>
				<div class="row">
					<!-- Review START -->
					<div class="col-lg-7">
						<hr class="my-4"> <!-- Divider -->
						<th:bolck th:each="review,reviewStat:${reviews}">
						<!-- Review item -->
						<div class="d-flex">
							<img class="avatar avatar-md rounded-circle float-start me-3" th:src="${review.user.userAvatar}" alt="avatar">
							<div>
								<div class="d-sm-flex justify-content-between mb-2">
									<div>
										<h6 class="m-0" th:text="${review.user.userName}"></h6>
										<span class="me-3 small" th:text="${#dates.format(review.reviewTime, 'dd/MM/yyyy HH:mm')}"></span>
									</div>	
								</div>
								<p th:text="${review.reviewText}"></p>
							</div>
						</div>
						</th:bolck>
						
						<!-- button -->
						<div class="mt-4 text-end">
							<a class="btn btn-primary-soft mb-0" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true" aria-controls="collapseExample">
								Write a review
							</a>
						</div>
		
						<!-- Collapse body -->
						<div class="collapse" id="collapseExample" style="">
							<div class="card card-body">
								<form>
									<!-- Text area -->
									<textarea class="form-control mb-3" id="reviewInput" placeholder="Your review" rows="3"></textarea>
									<!-- Button -->
									<button onclick="saveReview()" type="button" class="btn btn-primary mb-0">Post It <i class="bi fa-fw bi-arrow-right ms-2"></i></button>
								</form>
							</div>
						</div>
		
					</div>
					<!-- Review END -->
				</div>
			</div>
		</section>
	</div>
	<script layout:fragment="fragment_script">
		var SLOTID = null
		$(document).ready(function () {
			$('.slot-item').click(function(){
				var val = $(this).attr('value')
				getSlot(val)
			})
			$('#datepicker').datetimepicker({
			    language: 'en',
			    autoclose: 1,
			    format: 'yyyy-mm-dd',
			    minView: "month",
			    todayBtn: 1,
			    todayHighlight: 1,
			   startDate: new Date(),
			    defaultDate: new Date(),
			  }).on('changeDate', function(e) {
				  var date = e.date;
				  var y = date.getFullYear();
				  var m = (date.getMonth() + 1);
				  var d = date.getDate();
        		  if(m*1 < 10){
					  m = '0' + m;
				  }
				  if(SLOTID){
					  getSlot(SLOTID)
				  }
			  });
		})
		function getSlot(slotId) {
			SLOTID = null
			$('.create-btn').addClass('disabled').addClass('btn-default').removeClass('btn-primary')
			$('.slot-text').text('Free slot:');
			$.ajax({
				type: "get",
				url: ctx + "/getSlot?slotId=" + slotId + '&date=' + $('#datepicker').val(),
				success: function (resp) {
					if(resp.slotCapacity - resp.hasSelect > 0){
						$('.create-btn').removeClass('disabled').removeClass('btn-default').addClass('btn-primary')
						SLOTID = slotId
					}else{
						
					}
					$('.slot-text').text('Free slot:' + resp.hasSelect + '/' + resp.slotCapacity);
				}
			});
		}
		function createOrder(){
			if(!SLOTID){
				layer.msg('Select Slot');
				return false
			}
			layer.msg("Do you want to select it", {
				title: 'tip', icon: 3, btn: ["Confirm", "Cancel"],
				yes: function () {
					$.ajax({
						type: "post",
						url: ctx + "/createOrder",
						data: {
							"sportId": '[[${sport.sportId}]]',
							"slotId": SLOTID,
							"date": $('#datepicker').val()
						},
						success: function (resp) {
							layer.msg(resp.msg);
							if (resp.status == 0) {
								setTimeout(function(){
									window.location.reload()
								}, 1200)
							}
						}
					});
				},
				btn2: function () {
					// layer.msg("Cancel");
				}
			});
		}
		function saveReview(){
			var reviewInput = $("#reviewInput").val()
			if(!reviewInput){
				layer.msg('Input reviewI');
				return false
			}
			$.ajax({
				type: "post",
				url: ctx + "/saveReview",
				data: {
					sportId: '[[${sport.sportId}]]',
					reviewText: reviewInput
				},
				success: function (resp) {
					layer.msg(resp.msg);
					if (resp.status == 0) {
						setTimeout(function(){
							window.location.reload()
						}, 1200)
					}
				}
			});
		}
	</script>
</body>
</html>